import emDatePicker from "./index.vue";
import datepicker from './datepicker.vue';



export default {
  title: "Example/datepicker",
  component: {emDatePicker,datepicker},

};
export const selectDatepicker = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { emDatePicker },
  template:`
  <emDatePicker   v-bind="$props">
  </emDatePicker>`,
});

selectDatepicker.argTypes = {
    type: {
      description:'选择不同格式的日期类型 点击下拉切换不同格式',
      control: {
        type: "select",
        options: ["year", "month", "date", "datetime"],
      },
    }, //返回指定输出格式
    placeholder: {    description:'输入框吗默认输入值', control: { type: 'text'}},
    value: {  description:'输入框时间值可以v-model', control: { type: 'date'}},
    disabled: { description:'是否禁用输入框',  control: { type: 'boolean' } },
    format: { description:'指定显示日期的格式',control: { type: 'select',
    options: ["y", "y-mm", "y-mm-dd", "mm","dd"],}},
    disabledDate:{description:'传递函数属性 限制时间选择范围'},
    appendToBody:{description:'将日期面板插入到body中(脱离文档流)',control:{type:'boolean'}},
    downStyle:{description:'下拉面板样式',control:{type:'object'}},
    readonly:{description:'日期输入框只读',control:{type:'boolean'}}

};

selectDatepicker.args={}


// =================================分割线===============================================


export const DatepickerDemo = (args, { argTypes }) => ({
  components: { datepicker },
  props: Object.keys(argTypes),
  template:`
  <datepicker :disabledDate="disabledDate1" :input="onInput" v-bind="$props">
  </datepicker>`,
  methods: {
    disabledDate1(time) {
      const min = new Date(2019, 0, 1)
      const max = new Date(2019, 11, 31)
      return time < min || time > max
    },
    onInput(time){   //time 就是当前的时间  选中时关闭这个组件
      
    }
  },
});

DatepickerDemo.argTypes = {

};

DatepickerDemo.args={}


//https://github.com/kostajh/mediawiki-all-extensions-all-skins/blob/a92af4eba2cf3826b741f1a44c0491df23c5594e/extensions/ContentTranslation/app/src/lib/mediawiki.ui/components/MWDialog/MWDialog.stories.js
// export const DismissableInformationDialog = (args, { argTypes }) => ({
//   components: { MwDialog, MwButton },
//   data: () => ({
//     showDialog: false
//   }),
//   props: Object.keys(argTypes),
//   template: `
//     <div class="container">
//       <mw-button label="Launch" v-on:click="openDialog()"></mw-button>
//       <mw-dialog v-model="showDialog" :fullscreen="fullscreen" :title="title">
//         {{bodyText}}
//       </mw-dialog>
//     </div>`,
//   methods: {
//     openDialog() {
//       this.showDialog = true;
//     }
//   }
// })
